<template>
  <view>
    <view class="keyword-view clearfix">
      <view class="float_left">
        <u-search
          disabled
          @search="searchConfirm()"
          :show-action="false"
          :clearabled="true"
          placeholder="请选择客户"
          v-model="customer_name"
          @click="goPage('/pagesT/customer/selCustomer')"
        ></u-search>
      </view>
      <view class="float_right" @click="openSearch"
        ><text class="custom-icon custom-icon-shaixuan"></text
      ></view>
    </view>
    <view class="com-ul">
      <view class="com-li" v-for="(item, index) in order_list" :key="index">
        <view class="cutomer-name clearfix">
          <view class="float_left ellipsis">
            <u-icon
              margin-left="10"
              name="account-fill"
              label-size="24"
              label-color="#FB5904"
              :label="item.customerName"
              color="#FB5904"
              size="28"
            ></u-icon>
          </view>
          <view class="float_right staff-name">
            {{ item.staffName }}
            <!-- <u-icon name="dianhua" color="#2d73ed" custom-prefix="custom-icon" /> -->
          </view>
        </view>
        <view class="cont">
          <view class="content">{{ item.content }}</view>
          <view v-if="item.picture" class="image-view"
            ><image
              @click="previewImage(item.picture)"
              :src="item.picture"
              mode="aspectFill"
            ></image
          ></view>
          <view class="address clearfix">
            <view class="float_left">
              <block v-if="item.location">
                <u-icon name="map-fill" color="#6c6c6c" size="26"></u-icon>
                {{ item.location }}
              </block>
              <text v-else style="color: #999999">无定位信息</text>
            </view>
          </view>
          <view class="time clearfix">
            <view class="float_left">{{
              $u.timeFormat(item.createTime, "yyyy-mm-dd hh:MM:ss")
            }}</view>
            <view
              v-if="item.managerMobile"
              class="float_right"
              @click="callPhone(item.managerMobile)"
            >
              <!-- 	<u-icon @click="goPage(`/pagesT/customer/CommunicationLogsAdd?id=${item.id}`)"
								style="margin-right: 30rpx;" name="edit-pen-fill" color="#2d73ed" /> -->
              客户电话：{{ item.managerMobile }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="load_status" />
    <addBtn url="/pagesT/customer/CommunicationLogsAdd"></addBtn>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="下单日期">
              <view class="date-li">
                <picker mode="date" @change="bindDateStartChange">
                  <text class="date-li">{{
                    search_data.start
                      ? $u.timeFormat(search_data.start, "yyyy-mm-dd")
                      : "开始日期"
                  }}</text>
                </picker>
              </view>
              <view class="date-line">-</view>
              <view class="date-li">
                <picker mode="date" @change="bindDateEndChange">
                  <text class="date-li">{{
                    search_data.end
                      ? $u.timeFormat(search_data.end, "yyyy-mm-dd")
                      : "结束日期"
                  }}</text>
                </picker>
              </view>
            </u-form-item>
          </u-form>
        </view>
        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="getAllCustomerCommunication()"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      load_status: "nomore",
      customerData: "",
      page: 1,
      pageSize: 10,
      total: 0,
      order_list: [],
      customer_name: "",
      customer_id: "",
      search_show: false,
      search_data: {
        start: "",
        end: "",
      },
    };
  },
  watch: {
    customerData(val) {
      if (val) {
        this.customer_name = val.name;
        this.customer_id = val.id;
        this.page = 1;
        this.getAllCustomerCommunication();
      }
    },
  },
  computed: {
    staffId() {
      return this.$store.state.userInfo.staffId;
    },
    isAdministrator() {
      return this.$store.state.access.isAdministrator;
    },
  },
  onShow() {
    this.getAllCustomerCommunication();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getAllCustomerCommunication();
  },
  onReachBottom() {
    if (this.total / this.pageSize > this.page) {
      this.page += 1;
      this.getAllCustomerCommunication();
    }
  },
  methods: {
    clearValue() {
      this.search_show = false;
      this.customer_name = "";
      this.customer_id = "";
      this.search_data = {
        start: "",
        end: "",
      };
      this.page = 1;
      this.getAllCustomerCommunication();
    },
    getAllCustomerCommunication() {
      this.search_show = false;
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        customerId: this.customer_id,
        start: this.search_data.start,
        end: this.search_data.end,
      };
      if (!this.isAdministrator) {
        params.staffId = this.staffId;
      }
      this.$u.api.getAllCustomerCommunication(params).then((res) => {
        if (this.page === 1) {
          this.order_list = res.data;
        } else {
          this.order_list = this.order_list.concat(res.data);
        }
        this.load_status = this.$utils.loadStatus(
          this.page,
          this.pageSize,
          res.pageTotal
        );
        this.total = res.pageTotal;
      });
    },
    previewImage(image) {
      // 预览图片
      uni.previewImage({
        urls: [image],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    openSearch() {
      this.search_show = true;
    },
    bindDateStartChange(e) {
      this.search_data.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_data.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
// .keyword-view {
// 	position: fixed;
// 	width: 100%;
// 	top: 0;
// 	left: 0;
// 	padding: 20rpx 24rpx;
// 	background-color: #ffffff;
// 	z-index: 9;

// 	.float_left {
// 		width: 640rpx;
// 	}

// 	.float_right {
// 		line-height: 64rpx;
// 		width: 50rpx;
// 		text-align: center;
// 		color: #666666;
// 	}
// }
.keyword-view {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20rpx 24rpx;
  background-color: #ffffff;
  z-index: 9;

  .float_left {
    width: 640rpx;
  }

  .float_right {
    line-height: 64rpx;
    width: 50rpx;
    text-align: center;
    color: #666666;
  }
}

.com-ul {
  padding-top: 100rpx;

  .com-li {
    width: 710rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    padding: 20rpx 0;
    border-radius: 20rpx;

    .cutomer-name {
      padding-bottom: 10rpx;
      color: $uni-color-primary;
      font-size: 24rpx;

      .float_left {
        max-width: 540rpx;
        background-color: #ecf5ff;
        border-top-right-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        padding: 0 20rpx;
        line-height: 40rpx;
      }

      .staff-name {
        padding-right: 20rpx;
        line-height: 40rpx;
      }
    }

    .cont {
      padding: 0 20rpx;
      line-height: 36rpx;

      .content {
        padding-bottom: 10rpx;
      }

      .image-view {
        padding-bottom: 10rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 10rpx;
        }
      }

      .address {
        padding-bottom: 10rpx;
        font-size: 24rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
